<template>
	<view class="content">
		<view class="top">
			<uni-forms>
				<view class="mid">
					<view class="userName">
						姓名：
					</view>
					<view class="name">
						<input type="text" value="" placeholder="请输入姓名" />
					</view>
				</view>


				<view class="mid">
					<view class="userName">
						电话：
					</view>
					<view class="name">
						<input type="number" value="" placeholder="请输入电话" />
					</view>
				</view>


				<view class="mid">

					<view class="name1">
						<input type="number" value="" placeholder="请输入验证码" />
					</view>
					<view class="userName">
						发送验证码
					</view>
				</view>

				<view class="mid">
					<view class="userName">
						省：
					</view>
					<view class="name">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]?array[index]:'请选择城市'}}</view>
						</picker>
					</view>
				</view>

				<view class="mid">
					<view class="userName">
						市：
					</view>
					<view class="name">
						<picker @change="bindPickerChange1" :value="index" :range="array2">
							<view class="uni-input">{{array2[index2]?array2[index2]:'请选择城市'}}</view>
						</picker>
					</view>
				</view>

				<view class="mid">
					<view class="userName">
						地址：
					</view>
					<view class="name">
						<input type="text" value="" placeholder="请输入地址" />
					</view>
				</view>

				<view class="reserve" @click="sub">
					保存
				</view>

			</uni-forms>



		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: '',
				index2: '',
				array: ["北京市", "湖北省", "湖南省"],
				array2: ["朝阳区", "武汉市", "长沙市"]
			}
		},
		methods: {
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			bindPickerChange1(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index2 = e.target.value
			},
			sub() {
				uni.showToast({
					title: "添加成功",
					duration: 2000,
					success: function(res) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)

					}
				})
			},

		}
	}
</script>

<style>
	.top {
		width: 100%;
		height: 1140rpx;

	}

	.mid {
		width: 60%;
		display: flex;
		justify-content: space-around;
		margin: auto;
		margin-top: 40rpx;
	}

	.mid .name {

		border: 1rpx solid #999999;
		border-radius: 4rpx;
	}

	.uni-input {
		border: 1rpx solid #999999;
		width: 384rpx;

	}

	.name1 {
		width: 50%;
		border: 1rpx solid #999999;
		border-radius: 10rpx;
	}

	.reserve {
		width: 60%;
		height: 100rpx;
		color: #FFFFFF;
		background-color: #ff0000;
		margin: auto;
		margin-top: 60rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 10rpx;
	}
</style>
